<template>
  <div class="order-aMap">
    <div id="amapContainer"></div>
    <div id="myPageTop">
      <table>
        <tr>
          <td>
            <label>左击获取经纬度：</label>
          </td>
        </tr>
        <tr>
          <td>
            <input type="text" readonly="true" id="lnglat">
          </td>
        </tr>
        <tr>
          <td>
            <label>按关键字搜索：</label>
          </td>
        </tr>
        <tr>
          <td>
            <input type="text" placeholder="请输入关键字进行搜索" id="tipinput">
          </td>
        </tr>
      </table>
    </div>
    <div class="button-group">
      <input id="setCenter" type="button" class="button" value="改变地图中心点及缩放级别"/>
    </div>
  </div>
</template>

<script>
  /* eslint-disable no-undef */
  import AMap from 'AMap'
  // import AMapUI from 'AMapUI'
  export default {
    name: 'a-map',
    data() {
      return {
        name: '111'
      }
    },
    mounted() {
      const that = this
      this.map = new AMap.Map('amapContainer', {
        resizeEnable: true,
        zoom: 11,
        center: [116.397428, 39.90923]
      })
      this.map.plugin(['AMap.ToolBar'], function() {
        that.map.addControl(new AMap.ToolBar())
      })
      AMap.event.addDomListener(document.getElementById('setCenter'), 'click', function() {
        // 设置缩放级别和中心点
        that.map.setZoomAndCenter(14, [116.205467, 39.907761])
        // 在新中心点添加 marker
        const marker = new AMap.Marker({
          map: that.map,
          position: [116.205467, 39.907761]
        })
        console.log('marker', marker)
      })

      // 为地图注册click事件获取鼠标点击出的经纬度坐标
      const clickEventListener = this.map.on('click', function(e) {
        document.getElementById('lnglat').value = e.lnglat.getLng() + ',' + e.lnglat.getLat()
      })
      const auto = new AMap.Autocomplete({
        // input: 'tipinput'
        input: document.getElementById('tipinput')
      })
      console.log('aa', clickEventListener)
      AMap.event.addListener(auto, 'select', function(e) {
        if (e.poi && e.poi.location) {
          that.map.setZoom(15)
          that.map.setCenter(e.poi.location)
        }
      }) // 注册监听，当选中某条记录时会触发
    }
  }
</script>

<style scoped>
  .order-aMap{
    position: relative;
  }
  #amapContainer{
    width: 640px;
    height: 400px;
  }
</style>
